<template>
  <div class="box">
    <hmHead class="fixd" title="图片分享详情"></hmHead>
    <div class="main">
      <hmNavbar
        @click.native="$router.back()"
        title="图片详情"
        left-text="返回"
      ></hmNavbar>
      <div class="content">
        <div class="title">{{ imageInfoData.title }}</div>
        <div class="subtitle">
          {{ imageInfoData.add_time | dateFormat }}
          {{ imageInfoData.click }} 次浏览 分类：{{ imageInfoData.category }}
        </div>
        <div class="imgs">
          <img @click="imgsFn"
            v-for="(img, index) in thumImagesList"
            :key="index"
            :src="img.src"
            alt=""
          />
        </div>
        <div class="text" v-html="imageInfoData.content"></div>
      </div>
    </div>
    <div class="to_top">返回顶部</div>
    <!-- 提交评论 -->
    <hmcomment :articleId="id"></hmcomment>
  </div>
</template>

<script>
import hmNavbar from "@/component/hm-navbar.vue";
import hmHead from "@/component/hm-head.vue";
import { getThumImages, getImageInfo } from "@/api/photos.js";
import { ImagePreview } from 'vant';
import hmcomment from "@/component/hm-comment.vue"
export default {
  components: {
    hmNavbar,
    hmHead,
    hmcomment
  },
  data() {
    return {
      thumImagesList: [], //缩略图数组
      imageInfoData: [], //详细描述信息
      id:this.$route.params.id
    };
  },
  async mounted() {
    let imgid = this.$route.params.id;
    this.thumImagesList = (await getThumImages(imgid)).data.message;

    this.imageInfoData = (await getImageInfo(imgid)).data.message[0];

    // 返回顶部
    let obtn = document.getElementsByClassName("to_top")[0];
    let timer = null;// 时间标识符
    let isTop = true;
    // 滚动条滚动时触发
    window.onscroll = function() {
      // 回到顶部过程中用户滚动滚动条，停止定时器
      if (!isTop) {
          clearInterval(timer);
      };
      isTop = false;
    };
    // 点击事件
    obtn.onclick = () =>{
      // this.$nextTick()将回调延迟到下次 DOM 更新循环之后执行
      this.$nextTick(()=>{
          // document.documentElement.scrollTo(0,0)

          // 设置定时器
          timer = setInterval(function(){
              // 获取滚动条距离顶部高度
              let osTop = document.documentElement.scrollTop || document.body.scrollTop;
              // console.log('osTop '+osTop);
              // 减少的速度
              let ispeed = Math.floor(-osTop / 7);
              // console.log('ispeed '+ispeed);
              document.documentElement.scrollTop = document.body.scrollTop = osTop+ispeed;
              // 到达顶部，清除定时器
              if (osTop == 0) {
                  clearInterval(timer);
              };
              isTop = true;
          },30);
      })
    };
  },
  methods: {
    imgsFn(){
      let imgs =[];
      for (let i = 0; i < this.thumImagesList.length; i++) {
        const item = this.thumImagesList[i];
        imgs.push(item.src)
      }
      ImagePreview(imgs);
    }
  },
};
</script>

<style lang="less" scoped>
.box {
  margin: 0 0 60px;
  padding-top: 50px;
  .fixd{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
  }
  .content {
    margin: 10px;
    .title {
      font-size: 20px;
      font-weight: 700;
      color: #008ad2;
    }
    .subtitle {
      height: 50px;
      line-height: 40px;
      font-size: 12px;
      color: #9a9a9a;
      padding: 0 10px;
      margin: 0 -10px;
      border-bottom: 1px solid #eee;
    }
    .imgs {
      display: flex;
      flex-wrap: wrap;
      img {
        width: 110px;
        height: 130px;
        margin: 10px;
      }
    }
    .text {
      font-size: 19px;
      line-height: 30px;
    }
  }
  .to_top {
    z-index: 100;
    width: 50px;
    padding: 8px;
    text-align: center;
    font-size: 18px;
    color: #fff;
    border-radius: 30px;
    background-color: #26a2ff;
    position: fixed;
    top: 80%;
    right: 5%;
  }
}
</style>